<template>
  <base-view class="custom" :model="query" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="平台商户代码">
          <a-input v-model="query.platMchntNo" placeholder="输入平台商户代码" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="平台商户名称">
          <a-input
            placeholder="输入平台商户名称"
            v-model="query.platMchntName"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="所属机构代码" >
          <a-select  v-model="query.manageInstId" default-value="Option1" @click.native="getInstIdOrganizationList()">
            <a-select-option value="">
              -请选择-
            </a-select-option>
            <a-select-option v-for="item in manageInstIdList" :key="item" :value="item.value">
              {{ item.value }}-{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="法人证件编号">
          <a-input placeholder="输入法人证件编号" v-model="query.artifCertNo" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
      <a-form-model-item class="search">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button
          type="primary"
          v-has-permission="['platMchnt:add']"
          @click="add()"
        >
          <a-icon type="plus" />
          <span>增加</span>
        </a-button>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon
            type="setting"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            v-has-permission="['platMchnt:update']"
            @click="edit(record)"
            v-if="record.platMchntStatus !== '02' && record.platMchntStatus !== '03' "
            title="修改"
          ></a-icon>
          <a-icon
            type="check-circle"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            v-has-permission="['platMchnt:update']"
            @click="changeStatus(record,'use')"
            v-if="record.platMchntStatus === '02'"
            title="启用"
          ></a-icon>
          <a-icon
            type="minus-circle"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            v-has-permission="['platMchnt:update']"
            @click="changeStatus(record,'stop')"
            v-if="record.platMchntStatus === '01'"
            title="停用"
          ></a-icon>
          <a-icon
            v-has-permission="['platMchnt:view']"
            type="eye"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            @click="view(record)"
            title="查看"
          ></a-icon>
          <a-icon
            type="delete"
            theme="twoTone"
            twoToneColor="#4a9ff5"
            title="注销"
            v-if="record.platMchntStatus !== '03'"
            @click="changeStatus(record,'cancel')"
          ></a-icon>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="[
              'platMchnt:view',
              'platMchnt:update',
              'platMchnt:delete',
            ]"
          ></a-badge>
        </template>
        </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <plat-mchnt-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
import RangeDate from "../../../../components/datetime/RangeDate";
import PlatMchntOperation from "./PlatMchntOperation";

export default {
  name: "PlatMchnt",
  components: { PlatMchntOperation, RangeDate },
  data() {
    return {
      beanInfo: {},
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "",
      operationType: "add",
      query: {
        instId: "",
        platMchntNo: "",
        platMchntName: "",
        manageInstId: "",
        artifCertNo: "",
      },
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      manageInstIdList:[],
      columns: [
        {
          title: "平台商户代码",
          dataIndex: "platMchntNo",
          width: 120,
        },
        {
          title: "平台商户名称",
          dataIndex: "platMchntName",
          width: 120,
        },
        {
          title: "所属机构代码",
          dataIndex: "manageInstId",
          width: 120,
        },
        {
          title: "所属机构",
          dataIndex: "manageInstName",
          width: 120,
        },
        {
          title: "微信进件状态",
          dataIndex: "wechatExpandStatus",
          width: 300,
        },
        {
          title: "审批状态",
          dataIndex: "auditStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "待提交审批";
              case "01":
                return "新增-审批流程中";
              case "02":
                return "新增-审批通过";
              case "03":
                return "新增-审批拒绝";
              case "41":
                return "修改-审批流程中";
              case "42":
                return "修改-审批通过";
              case "43":
                return "修改-审批拒绝";

              case "21":
                return "停用-审批流程中";
              case "22":
                return "停用-审批通过";
              case "23":
                return "停用-审批拒绝";

              case "31":
                return "启用-审批流程中";
              case "32":
                return "启用-审批通过";
              case "33":
                return "启用-审批拒绝";

              case "11":
                return "注销-审批流程中";
              case "12":
                return "注销-审批通过";
              case "13":
                return "注销-审批拒绝";
            }
          },
        },
        {
          title: "平台商户状态",
          dataIndex: "platMchntStatus",
          width: 150,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "非正式";
              case "01":
                return "正式";
              case "02":
                return " 停用";
              case "03":
                return "已注销";
            }
          },
        },
        {
          title: "代理商联系人",
          dataIndex: "contactName",
          width: 150,
        },
        {
          title: "联系人电话",
          dataIndex: "contactPhone",
          width: 150,
        },
        {
          title: "联系人邮箱",
          dataIndex: "contactEmaiil",
          width: 150,
        },
        {
          title: "法人行",
          dataIndex: "instId",
          width: 150,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          fixed: "right",
          width: 120,
        },
      ],
      dataSource: [],
    };
  },
  methods: {
    handleChange(value,param) {
      this.query[param] = value;
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.pageNum = this.pagination.defaultCurrent;
        this.pagination.pageSize = this.pagination.defaultPageSize;
        await this.search();
      }
    },
    async getInstIdOrganizationList() {
      try {
        const res = await this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          q:encodeURIComponent(`&${this.query.instId}`)
        });
        if (res.status === 200) {
          this.manageInstIdList = res.data.results.map(i => {
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },

    async reset(){
      this.query = {instId:this.query.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/merParam/platMchntInfo/list", {
          instId: this.query.instId,
          platMchntNo: this.query.platMchntNo,
          platMchntName: this.query.platMchntName,
          manageInstId: this.query.manageInstId,
          artifCertNo: this.query.artifCertNo,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    openModal(type = "add", beanInfo) {
      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        use: "启用",
        stop: "停用",
        delete: "操作",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if(type === 'view'){
        this.isHideFoot = true;
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        this.$refs.modalForm.setBeanInfo(beanInfo, this.query.instId);
        this.$refs.modalForm.resetFields();
      });
    },
    async add() {
      this.openModal("add");
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    changeStatus(item,type) {
      this.openModal(type, item);
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
